const { merge } = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const baseConfig = require('./webpack.base.conf');

const prodRules = [
  {
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            // 配置要使用的插件
            plugins: [
              'postcss-preset-env'
            ]
          }
        }
      }
    ]
  },
  {
    test: /\.less$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            // 配置要使用的插件
            plugins: [
              'postcss-preset-env'
            ]
          }
        }
      },
      'less-loader'
    ]
  }
]

module.exports = merge(baseConfig, {
  mode: 'production',
  module: {
    rules: [
      {
        oneOf: prodRules
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ],
  optimization: {
    minimize: true
  },
  devtool: 'eval-source-map'
})
